<div class="title-insert-panel">
  <span style="font-size:18px">
    {{ 'insertPanel.flowunitList' | translate}}
  </span>
  <i 
    class="icon icon-refresh"
    (click)="refreshFlowunit()">
  </i>
</div>

<d-search
  style="margin:0 8px 0 24px; width: 90%; max-width: 200px"
  [isKeyupSearch]="true"
  (searchFn)="onSearch($event)">
</d-search>
<d-accordion
  id="main-accrodition"
  [data]="nodeShapeCategories"
  [accordionType]="'embed'"
  [autoOpenActiveMenu]="true"
  [innerListTemplate]="innerListTemplate"
  [ngStyle]="classes.columns">
</d-accordion>

<ng-template #innerListTemplate let-item="item">
  <div
    class="devui-accordion-submenu menu-detail draggable search-detail"
    [ngStyle]="classes.column"
    *ngFor="let child of item.children"
    [ngSwitch]="item.title"
    title=""
    draggable="true"
    (dragstart)="handleNodeShapeDragStart(child).call(this, $event)"
    (drag)="handleNodeShapeDrag(child).call(this, $event)"
    (dragend)="handleNodeShapeDragEnd(child).call(this, $event)">
    <div
      class="menu-block"
      [ngbTooltip]="tipContent"
      #t1="ngbTooltip"
      (mouseenter)="toggleTip(t1, child)"
      placement="right"
      container="body"
      tooltipClass="my-custom-class">
      <img *ngSwitchCase="'Image'" class="icon-img"/>
      <img *ngSwitchCase="'Video'" class="icon-video"/>
      <img *ngSwitchCase="'Input'" class="icon-input"/>
      <img *ngSwitchCase="'Output'" class="icon-output"/>
      <img *ngSwitchDefault class="icon-common"/>
      {{child.title}}
    </div>
  </div>
</ng-template>

<ng-template #tipContent let-context="context">
  <div *ngIf="context" class="tips-block">
    <div *ngIf="context.title">{{tipName}}{{context.title}}</div>
    <div *ngIf="context.version">{{tipVersion}}{{context.version}}</div>
    <div *ngIf="context.types.length>0 && context.group!=='Port'">{{tipTopType}}{{context.types.join(' | ')}}</div>
    <div *ngIf="context.types.length>0 && context.group==='Port'">{{tipType}}{{context.types.join(' | ')}}</div>
    <div *ngIf="context.description">{{tipDescription}}{{context.description}}</div>
  </div>
</ng-template>
